<!-- 计划分解 -->
<template>
  <div class="executionRecord">
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="bomItemId"
      size="small"
      border>
      <el-table-column type="index" label="序号" width="50" align="center"/>
      <el-table-column show-overflow-tooltip prop="productName" label="部件名称" align="center"/>
      <el-table-column show-overflow-tooltip prop="productCode" label="部件编码" align="center" />
      <el-table-column show-overflow-tooltip prop="itemTypeName" label="部件属性"  align="center"/>
      <el-table-column show-overflow-tooltip prop="productSpc" label="部件型号" align="center"/>
      <el-table-column show-overflow-tooltip prop="parentProductName" label="母阶" align="center" />
      <el-table-column show-overflow-tooltip prop="quantityOnHand" label="仓库可用数"  align="center"/>
      <el-table-column show-overflow-tooltip prop="quantity" label="计划生产数" align="center"/>
      <el-table-column show-overflow-tooltip prop="unitOfMeasure" label="单位" align="center" width="50" />
      <el-table-column prop="workorderType" label="获取方式" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.workorderType" :disabled="scope.row.status=='undispatch'?false:true" placeholder="请选择" @change="handleChange(scope.row)">
            <el-option 
              v-for="dict in dict.type.mes_workorder_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="routeName" label="工艺路线" align="center"/>
      <el-table-column show-overflow-tooltip prop="workshopName" label="生产单位" align="center"/>
      <el-table-column show-overflow-tooltip prop="status" label="生产状态" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.production_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-popconfirm
            title="确定下发工单吗？"
            @confirm="handleDown(scope.row)"
          >
            <template slot="reference">
              <el-button v-if="scope.row.status=='undispatch'" type="text" size="mini">工单下发</el-button>
            </template>
          </el-popconfirm>

          <el-button type="text" style="margin: 0 10px;" size="mini" @click="handleEdit(scope.row)">查看</el-button>
          <!-- <el-button type="text" size="mini" @click="handleWithdrawPlan(scope.row)">撤回</el-button> -->
          <!-- <el-button type="text" size="mini" @click="handleDelete(scope.row)">暂停</el-button> -->
          <!-- <el-button type="text" size="mini" @click="handleEdit(scope.row)">打印</el-button> -->
          <el-popconfirm
            title="确定完成工单吗？"
            @confirm="handleFinishPlan(scope.row)"
          >
            <template slot="reference">
              <el-button type="text" size="mini" >完成</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" title="查看计划" width="50%" append-to-body>
      <el-form :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="部件名称">
              <el-input v-model="form.itemTypeName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="母阶">
              <el-input v-model="form.parentProductName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划生产数">
              <el-input v-model="form.quantity" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位">
              <el-input v-model="form.unitOfMeasure" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="工艺路线">
              <el-input v-model="form.routeName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生产单位">
              <el-input v-model="form.workshopName" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="计划名称">
              <el-input v-model="form.name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划编号">
              <el-input v-model="form.code" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { 
  withdrawPlan, 
  finishWorkorder,
} from "@/api/mes/pro/productionPlan";
import {updateWorkorder, dispatchWorkorder} from "@/api/mes/pro/workorder";
export default {
  name: "executionRecord",
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  dicts: ['mes_workorder_type', 'production_status'],
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      form: {}
    }
  },
  methods: {
    // 撤销
    handleWithdrawPlan(row){
      this.$modal.confirm('确认撤销计划单？').then(function() {
        return withdrawPlan(row.workorderId)
      }).then(() => {
        // this.getList();
        this.$modal.msgSuccess("更改成功");
      }).catch(() => {});
    },
    // 完成
    handleFinishPlan(row){
      debugger
      finishWorkorder(row.workorderId).then(res=>{
        this.$modal.msgSuccess("更改成功");
        // this.$emit('handleClick', { name: '3' })
      }).catch(err=>{
        console.log(err);
      })
      // this.$modal.confirm('确认完成计划单？').then(function() {
      //   return finishWorkorder(row.tasks.workorderId)
      // }).then(() => {
      //   // this.getList();
      //   this.$modal.msgSuccess("更改成功");
      // }).catch(() => {});
    },
    handleDown(row){
      dispatchWorkorder({...row}).then(res=>{
        this.$modal.msgSuccess("更改成功");
        this.$emit('handleClick', { name: '3' })
      }).catch(err=>{
        console.log(err);
      })
      // row.value == 1 ? this.$router.push('/mes/pro/workorder') : this.$router.push('/mes/pro/outsourcing')
      // this.$router.push({path: '/mes/pro/productionPlan/print', query: {id: row.id}})
      console.log(row);
    },
    handleEdit(row){
      this.dialogVisible = true;
      this.form = {...row};
      console.log(row);
    },
    // 切换厂内委外
    handleChange(row){
      console.log(row);
    }
  }
}
</script>

<style lang="scss" scoped>
.executionRecord{
  .timestamp {
    text-align: left;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-name{
      font-style: 14px;
      font-weight: 600;
      color: #000;
    }
    &-time{
      color: #999;
    }
  }
  .card-box{
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 0;
    &-box{
      font-size: 14px;
      margin-right: 100px;
      &:last-child{
        margin-right: 0;
      }
    }
  }
  .card-main{
    margin-top: 20px;
    &-table{
      display: flex;
      align-items: center;
      &-item{
        // margin-bottom: 8px;
        border: 1px solid #999;
        text-align: center;
        &-label{
          padding: 5px;
          font-size: 14px;
          color: #999;
          margin-right: 8px;
        }
        &-value{
          padding: 5px;
          font-size: 14px;
          color: #000;
          // border: 1px solid #999;
          border-top: 1px solid #999;
        }
      }
    }
  }

}
</style>